<template>
  <div class="table">
    <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
      <el-table-column prop="id" label="编号" width="70"> </el-table-column>
      <el-table-column prop="title" label="标题" width="160"> </el-table-column>
      <el-table-column prop="flowerUserId" label="作者ID" width="70">
      </el-table-column>
      <el-table-column prop="author" label="作者名" width="120">
      </el-table-column>
      <el-table-column prop="hit" label="点击数" width="100">
      </el-table-column>
      <el-table-column prop="commentNum" label="评论数" width="100">
      </el-table-column>
      <el-table-column prop="created" label="创建日期" width="200">
      </el-table-column>
      <el-table-column prop="modified" label="修改日期" width="200">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="props">
          <el-button link type="primary" size="small" @click="toDetail(props.row.id)">详情</el-button>
          <el-popconfirm @confirm="deleteArticle(props.row.id)" title="确认删除？">
            <template #reference>
              <el-button link type="primary" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  getArticlePage, deleteArticleById
} from "@/api/article";
import { ElMessage } from 'element-plus';
export default {
  name: "articleListTable",

  data() {
    return {
      tableData: [],
      pages: null,
      loading: false,
      size: 10,
      currentPage: 1,
    };
  },

  methods: {
    //获取所有文章
    queryArticleList(size, current,form=null) {
      this.loading = true;
      this.size = size;
      this.currentPage = current;
      const params = {
        size: size,
        current: current,
      };
      //将查询表与必要字段进行融合
      Object.assign(params,form);
      //发送表单
      return getArticlePage(params)
        .then((response) => {
          this.tableData = response.data.data.records;
          this.pages = response.data.data.pages;
          this.loading = false;

        })
        .catch((error) => {

        });
    },

    //获取总页数
    getPages() {
      return this.pages;
    },

    //点击详情按钮事件
    toDetail(id) {
      //向父组件传递toEdit消息并传递文章的id
      this.$emit('toDetail', id);
    },

    //通过id提交删除请求
    deleteArticle(id) {
      //创建一个表单
      var form = document.createElement("form");
      form.id = "form";
      form.name = "form";
      // 添加到 body 中
      document.body.appendChild(form);
      // 创建一个输入
      var input = document.createElement("input");
      // 设置相应参数
      input.type = "Number";
      input.name = "id";
      input.value =id;
      form.appendChild(input);
      return deleteArticleById(form)
        .then((response) => {
          this.queryFlowerList(this.size, this.currentPage);
          ElMessage.success("删除成功");
        })
        .catch((error) => {
          ElMessage.error("删除失败");
        });
    },
  },
};
</script>
<style scoped>
.table {
  display: inline-block;
  margin: 1%;
}

.detailDiv {
  margin-left: 2%;
}
</style>